<template>
  <div>
    <div v-transfer-dom>
      <actionsheet :menus="menus" @on-click-menu="clickMenu" v-model="showMenu" show-cancel></actionsheet>
    </div>
    <!-- <top class="top"></top> -->
    <!-- <view-box ref="viewBox" body-padding-top="40px" >

      
    </view-box>-->
    <div style="margin-bottom:45px">
      <x-header slot="header" ref="header" style="width:100%;position:fixed;left:0;top:0;z-index:100;" @on-click-more="showExit"
        :left-options="{showBack: true, backText: '返回'}" :right-options="{showMore: true}">
        <span>{{title}}</span>
        <span style="float:right">{{userName}}</span>
      </x-header>
    </div>
    <div class="listView">
      <div class="listItem">
        <div class="card">
          <img src="../assets/img/book.jpg" class="book" />
        </div>
        <div class="content">
          <div class="itemTitle">书名：{{data.bookName}}</div>
          <div class="itemContent">作者：{{data.author}}</div>
          <div class="itemContent">出版社：{{data.publisher}}</div>
          <div class="itemContent">出版日期：{{data.publicationDate}}</div>
          <div class="itemAction">
          </div>
        </div>
      </div>
    </div>
    <div class="listView">
      <div class="listItemAuto">
        <group title="馆藏列表" style="padding:5px 20px;">
          <cell v-for="(item, index) in inventoryList" :data="item" :key="index" :title="item.libraryName" :value="item.text"></cell>
        </group>
      </div>
    </div>

    <group label-width="4.5em" label-margin-right="2em" label-align="right">
      <selector title="图书分馆" :options="libraryIdArray" placeholder="请选择取书分馆" v-model="library"></selector>
    </group>
    <group style="padding:5px 20px;">
      <x-button type="primary" action-type="button" @click.native="submit">预定借阅</x-button>
    </group>
  </div>
</template>

<script>
import {
  Group,
  Cell,
  Blur,
  Grid,
  GridItem,
  GroupTitle,
  Tab,
  TabItem,
  XInput,
  LoadMore, XHeader, Actionsheet, XButton, Selector
} from "vux";
import { mapState } from "vuex";
export default {
  components: {
    Group,
    Cell,
    Blur,
    Grid,
    GridItem,
    GroupTitle,
    Tab,
    TabItem,
    XInput,
    LoadMore,
    XHeader,
    Actionsheet, XButton, Selector
  },
  data() {
    return {
      tabIndex: 0,
      haveData: false,
      QR_CODE: "",
      current: 1,
      pageSize: 20,
      infinitediv: {
        height: ""
      },
      infiniteId: +new Date(),
      bookId: '',
      todoList: [],
      data: {}, showMenu: false,
      menus: {
        // ChangePwd: "密码修改",
        SingOut: "注销账号",
        ExitApp: "退出系统",
      },
      libraryArray: [],
      libraryIdArray: [],
      library: '',
      inventoryList: [],
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    getHeight() {
      //alert(window.innerHeight);
      this.infinitediv.height = window.innerHeight - 170 + "px";
    },
    clickMenu(locale) {
      console.log(locale);
      switch (locale) {
        case "ChangePwd":
          break;
        case "SingOut":
          localStorage.removeItem("username");
          localStorage.removeItem("password");
          localStorage.removeItem("autoLogin");
          this.$router.push({ path: "/" });
          break;
        case "ExitApp":
          //wx.closeWindow();
          Android.exitApp();
          break;
        default:
          break;
      }
    },
    //弹出菜单
    showExit() {
      this.showMenu = true;
    },
    //加载图书
    loadBook(bookId) {
      this.bookId = bookId;
      let params = {
        id: this.bookId,
      };
      this.$http
        .get("/api/book/get", { params })
        .then(res => {
          if (res.data.data) {
            this.data = res.data.data;
            this.inventoryList = this.data.inventoryList;
            if (this.inventoryList) {
              this.inventoryList.forEach(item => {
                // item.text = "总:" + item.totalQty + " 在馆:" + item.inPavilion + " 已借:" + item.borrowQty;
                item.text = "总:" + item.totalQty + " 在馆:" + item.inPavilion
              })
            }
          }
        })
        .catch(err => {
          console.log("err--" + err);
          this.$state.error();
        });
    },
    //记载图书馆分馆
    loadlibrary() {
      this.$http
        .get("/api/libraryBranch/all-list", {})
        .then(res => {
          if (res.data.data) {
            this.libraryArray = res.data.data;
            this.libraryIdArray = [];
            this.libraryArray.forEach(item => {
              this.libraryIdArray.push(item.libraryName);
            })
          }
        })
        .catch(err => {
          console.log("err--" + err);
          this.$state.error();
        });
    },
    submit() {
      if (!this.library) {
        this.$vux.alert.show({
          title: "提示信息",
          content: " 请选择图书馆分馆",
          onShow() {
            console.log("Plugin: I'm showing");
          },
          onHide() {
            console.log("Plugin: I'm hiding");
          },
        });
      }
    }
  },
  created() {
    this.$store.commit("updateTitle", "图书详情");
    this.$store.commit("updateShowBack", false);
    this.getHeight();
    let bookId = this.$route.params.bookId;
    if (bookId) {
      this.loadBook(bookId);
    } else {

    }
    this.loadlibrary();
  },
  computed: {
    ...mapState({
      showBack: (state) => state.showBack,
      title: (state) => state.title,
      userName: (state) => state.userName,
    }),
  },
  mounted() {
    this.$store.commit("updateTitle", "图书详情");
    this.$store.commit("updateShowBack", true);
  },
};
</script>

<style lang="less" scoped>
.vux-header {
  background-color: #1478ee !important;
}
.listView {
  width: 95%;
  padding: 10px;
  .noData {
    padding: 40px;
    text-align: center;
  }
  .listItem {
    // padding: 15px 5px;
    border: 1px solid rgba(26, 47, 66, 0.1);
    background: #ffffff;
    box-shadow: 0 4px 16px 0 rgba(26, 47, 66, 0.1);
    height: 145px;
    .card {
      align-items: center;
      padding: 5px;
      width: 100px;
      float: left;
      .book {
        height: 130px;
      }
      .warn {
        width: 14px;
        height: 14px;
      }
      .titleText {
        margin-left: 140px;
        color: rgba(0, 0, 0, 0.4);
        font-size: 14px;
        margin-right: 145px;
        width: auto;
      }
      .timeText {
        width: 145px;
        float: right;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.4);
      }
    }
    .content {
      margin-left: 100px;
      width: auto;
      .itemContent {
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.6);
      }
      .itemTitle {
        font-family: PingFangSC-Semibold;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.8);
        font-weight: bold;
        height: 35px;
        line-height: 35px;
      }
      .itemAction {
        margin-left: 32px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-size: 15px;
        height: 40px;
        line-height: 40px;
        color: rgba(0, 0, 0, 0.6);
        button {
          background: #ffffff;
          border: 1px solid #1478ee;
          height: 32px;
          width: 68px;
          font-family: PingFangSC-Regular;
          font-size: 13px;
          color: #1478ee;
        }
        .userName {
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.4);
          width: auto;
        }
        .location {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.4);
          width: auto;
          font-weight: bold;
          margin-right: 150px;
          line-height: 20px;
        }
        .button {
          width: 85px;
          float: right;
          display: flex;
          text-align: right;
          button {
            margin-left: 10px;
          }
        }
        .locationdeal {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: rgba(0, 0, 0, 0.4);
          width: auto;
          font-weight: bold;
        }
        .buttondeal {
          width: 80px;
          float: right;
        }
      }
    }
  }
  .listItemAuto {
    // padding: 15px 5px;
    border: 1px solid rgba(26, 47, 66, 0.1);
    background: #ffffff;
    box-shadow: 0 4px 16px 0 rgba(26, 47, 66, 0.1);
  }
}
.vux-x-input-right-full {
  margin-left: 5px;
  height: 44px;
  vertical-align: middle;
  line-height: 44px !important;
}
.scanImg {
  height: 44px;
  width: 44px;
  // background-color: red;
  line-height: 44px;
  margin-right: 10px;
  img {
    width: 30px;
    height: 30px;
    vertical-align: middle;
    vertical-align: middle;
    position: static;
    top: -50%;
    left: -50%;
  }
}
.weui-label {
  display: block;
  width: 85px !important;
  word-wrap: break-word;
  word-break: break-all;
  margin-right: 1em !important;
}
.weui-cell {
  /* padding: 10px 15px; */
  padding: none !important;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.weui-cells__title {
  margin-top: 0.77em;
  margin-bottom: 0.3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #000000 !important;
  font-size: 18px;
}
#infinitediv {
  overflow-x: scroll;
}
.weui-btn_primary {
  background-color: #1478ee;
}
.weui-btn_primary:hover {
  background-color: #1478ee;
}
.weui-btn_primary:active {
  background-color: #1478ee;
}
.weui-btn_primary {
  background-color: #1478ee;
  &:not(.weui-btn_disabled):visited {
    color: #1478ee;
  }
  &:not(.weui-btn_disabled):active {
    background-color: #1478ee;
  }
}
</style> 